<template>
  <div class="permissions">
    <div class="userList">
      <div class="add">
        <span><i style="color: red;">*  </i>用户易班ID：</span>
        <a-input v-model="userId" style="width: 200px" placeholder="用户易班ID必填"></a-input>
        <span>备注信息：</span>
        <a-input v-model="userNote" style="width: 250px" placeholder="用户信息备注"></a-input>
        <a-button type="primary" style="margin-left: 20px" @click="addPermissions">添加</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :row-key="(record) => record.userId"
      >
        <a slot="operation" slot-scope="text, record" type="link" @click="deleteData(record.userId)">删除</a>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userId: '',
      userNote: '',
      columns: [
        {
          dataIndex: 'userId',
          key: 'userId',
          title: '用户易班ID'
        },
        {
          dataIndex: 'userNote',
          key: 'userNote',
          title: '备注信息'
        },
        {
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
          title: '操作',
          width: 200
        }
      ],
      dataSource: []
    }
  },
  mounted () {
    this.fetchData()
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  methods: {
    addPermissions () {
      if (!this.userId) {
        this.$message.error('添加ID不能为空！')
        return
      }
      this.dataSource.push({
        userId: this.userId,
        userNote: this.userNote
      })
      const params = {
        type: 'permissionsConfig',
        data: this.dataSource,
        updateUser: this.userInfo.yb_realname,
        updateUserNo: this.userInfo.yb_userid
      }
      this.$api.report.updateConfig(params).then(res => {
        if (res.code === 0) {
          this.$message.success('用户权限配置成功！')
          this.fetchData()
        }
      })
    },
    fetchData () {
      this.$api.report.getConfig({ type: 'permissionsConfig' }).then(res => {
        if (res.code === 0) {
          if (res.data[0]) {
            console.log(res.data[0].data)
            this.dataSource = res.data[0].data
          }
        }
      })
    },
    deleteData (userId) {
      const data = this.dataSource.filter(ele => ele.userId !== userId)
      const params = {
        type: 'permissionsConfig',
        data,
        updateUser: this.userInfo.yb_realname,
        updateUserNo: this.userInfo.yb_userid
      }
      this.$api.report.updateConfig(params).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功！')
          this.fetchData()
        }
      })
    }
  }
}
</script>

<style scoped>
  .permissions {
    width: 1200px;
    margin: 0 auto;
  }
  .userList .add {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .userList .add span {
    margin: 0 10px;
  }
</style>
